<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2025-01-20 16:45:30
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-21 10:00:40
 * @FilePath: \my-project\src\views\CreateFormBiz\components\subform.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="subform" class="subform-box">
    <draggable v-model="list" v-bind="dragProps" class="subform" :style="style">
      <div v-for="(item, i) in list" :key="i" class="subform-item">
        <div class="subform-item-head">{{item.label}}</div>
        <div class="subform-item-body">
          <component :is="item.type" size="small" style="width: 100%"/>
        </div>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  props: ['itemData'],
  components: {
    draggable
  },
  data () {
    return {
      style: '',
      list: this?.itemData?.list || []
    }
  },
  watch: {
    list() {
      this.itemData.list = this.list
      this.calcStyle()
    }
  },
  computed: {
    dragProps() {
      return {
        group: 'people',
        animation: 200,
        disabled: false,
        ghostClass: 'ghost',
      }
    },
  },
  methods: {
    async calcStyle () {
      await this.$nextTick()
      const { width } = this.$refs.subform.getBoundingClientRect()
      console.log(width, this.list.length * 200)
      if (width < this.list.length * 200) {
        this.style = `width: ${this.list.length * 200}px`
      } else {
        this.style = ''
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.subform-box {
  border: 1px solid #ddd;
  overflow-x: auto;
  overflow-y: hidden;
}
.subform {
  display: flex;
  min-height: 85px;
  .subform-item {
    width: 200px;
    border-right: 1px solid #ddd;
    .subform-item-head {
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      font-size: 14px;
      color: #606266;
    }
    .subform-item-body {
      height:30px;
      padding: 10px 10px;
    }
  }
}
</style>